<template>
	<view class="content">
		<view class="Top_box">
			<view class="Top_me">
				<image :src="myinfo.avatarUrl || '../../../static/img/moren.png'"></image>
				
				<view class="name" v-if="login">
					<view>昵称 : {{myinfo.nickName}}</view>
					<view>{{myinfo.tel}}</view>
				</view>
				
				<view class="name" v-if="yeslogin">
					<view class="login_btn" @click="GoTologin">登录</view>
				</view>
				
				<view class="right_jiao">
					<image src="../../../static/img/rightjiao2.png"></image>
				</view>
			</view>
		</view>
		
		<view class="option_list">
			<view class="list_box">
				<view class="list_item">
					<image src="../../../static/img/renzheng.png"></image>
					<view>实名认证</view>
					<view class="right_info">
						<view>已实名</view>
						<image src="../../../static/img/rightjiao.png"></image>
					</view>
				</view>
				<!-- <view class="list_item">
					<image src="../../../static/img/qianbao.png"></image>
					<view>我的钱包</view>
					<view class="right_info">
						<view></view>
						<image src="../../../static/img/rightjiao.png"></image>
					</view>
				</view> -->
				<view class="list_item">
					<image src="../../../static/img/qingchu.png"></image>
					<view>清除缓存</view>
					<view class="right_info">
						<view>0k</view>
						<image src="../../../static/img/rightjiao.png"></image>
					</view>
				</view>
				
				<view class="list_item" @tap="yyRecord">
					<!-- <image src="../../../static/img/tuichu.png"></image> -->
					<u-icon name="grid" color="#2979ff" size="48"></u-icon>
					<view style="margin-left: 15rpx;">预约记录</view>
					<view class="right_info">
						<view></view>
						<image src="../../../static/img/rightjiao.png"></image>
					</view>
				</view>
				
				<view class="list_item" @tap="logout">
					<image src="../../../static/img/tuichu.png"></image>
					<view>退出</view>
					<view class="right_info">
						<view></view>
						<image src="../../../static/img/rightjiao.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login: false,
				yeslogin: true,
				title: 'Hello',
				myinfo:{}
			}
		},
		onLoad(a) {
			
		},
		onShow(e) {
			let that = this;
			uni.getStorage({
			    key: 'userInfo',
			    success: function (res) {
					that.myinfo = res.data
					console.log('个人信息',that.myinfo);
						that.yeslogin = false
						that.login = true
			    }
			});
		},
		methods: {
			GoTologin(){
				uni.navigateTo({
					url: '../../login/login'
				})
			},
			logout () {
				this.$store.commit('logout')
				this.myinfo = {}
				this.yeslogin = true
				this.login = false
			},
			yyRecord() {
				uni.navigateTo({
					url: '../../driver/yyrecord'
				})
			}
		}
	}
</script>

<style>
	page {
		border: #f5f5f5;
	}
	.Top_box {
	    background: #2979ff;
	    padding: 30px 15px;	
	}
	.Top_me {
		display: flex;
	    align-items: center;
	    color: #Fff;	
		font-size: 32rpx;
	}
	.name view:nth-child(1){
		margin-bottom: 5px;
		font-size: 36rpx;
	}
	.Top_me image {
		border-radius: 100px;
		width: 130rpx;
		height: 130rpx;
		border: 6rpx solid #fff;
		margin-right:25rpx;
	}
	.right_jiao {
		margin-left: auto;
	}
	.right_jiao image {
		border-radius: 100px;
		width: 40rpx;
		height: 40rpx;
		border: 0 solid #fff;
		margin-right:25rpx;
	}
	
	.option_list {
		background-color: #FFFFFF;
	}
	.list_box {
		padding: 0 12px;	
	}
	.list_item {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
		padding: 10px 0;
		font-size: 30rpx;
	}
	.list_item image:nth-child(1) {
		width: 30px;
		height: 30px;
	    margin-right: 6px;
	}
	
	.right_info {
		margin-left: auto;
	    display: flex;
	    align-items: center;
	    font-size: 24rpx;
		color: #7d7d7d;
	}
	.right_info image {
		width: 16px;
		height: 16px;
		margin-left: 5px;
	}
	.login_btn{
		border: 1px solid #FFFFFF;
		border-radius: 100px;
		padding: 2px 12px;
		font-size: 14px!important;
	}
</style>
